<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.search" placeholder="请输入查询内容" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column
        prop="id"
        label="序号"
        min-width="10%"
      />
      <el-table-column
        prop="task_name"
        label="任务名"
        min-width="20%"
      />
      <el-table-column
        prop="product_name"
        label="产品名"
        min-width="20%"
      />
      <el-table-column
        prop="device.name"
        label="设备名"
        min-width="20%"
      />
      <el-table-column
        prop="order_number"
        label="订单号"
        min-width="20%"
      />
      <el-table-column
        prop="consignee"
        label="收货人"
        min-width="20%"
      />
      <el-table-column
        prop="address"
        label="收货地址"
        min-width="20%"
      />
      <el-table-column
        label="日志"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-button size="medium" type="warning" icon="el-icon-message" circle @click="handleLog(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="screenshot"
        label="图片"
        min-width="30%"
      >
        <template slot-scope="scope">
          <el-popover placement="bottom" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
            <a :href="scope.row.screenshot" target="_blank" title="查看最大化图片">
              <img :src="scope.row.screenshot" style="width: 240px;height: 400px">
            </a>
            <img slot="reference" :src="scope.row.screenshot" style="width: 60px;height: 100px; cursor:pointer">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="20%"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'normal'" size="medium">正常</el-tag>
          <el-tag v-if="scope.row.status === 'exception'" type="danger" size="medium">异常</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="日志" :visible.sync="logVisible">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ logTitle }}</span>
        </div>
        <p style="white-space: pre-wrap;">{{ logContent }}</p>
      </el-card>
    </el-dialog>
  </div>

</template>

<script>
import { getOrderList, getTaskById } from '../../api/tiktok-store.js'
export default {
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        app: 'tiktok_store',
        search: ''
      },
      logVisible: false,
      logTitle: '',
      logContent: ''
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    getOrderList() {
      this.listLoading = true
      getOrderList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getOrderList()
    },
    handleLog(index, row) {
      getTaskById({ 'id': row.task_id }).then(response => {
        console.log(response)
        if (response.code === 1) {
          this.logContent = response.data.log
          this.logVisible = true
        }
      })
    }
  }
}
</script>
